<script lang='ts' setup>
import {useRouter} from 'vue-router'
import {onMounted} from 'vue'
import {useMessage} from 'naive-ui'

const router = useRouter()

onMounted(async () => {
  window.$message = useMessage()
})
</script>

<template>
  <div>
    <n-tabs :value='router.currentRoute!.value!.name as string' class='home-tabs' justify-content='center' size='large' type='line'>
      <n-tab name='dashboard' @click="router.push({name: 'dashboard'})">仪表板</n-tab>
      <n-tab name='websites' @click="router.push({name: 'websites'})">站点配置</n-tab>
      <n-tab name='toolbox-index' @click="router.push({name: 'toolbox-index'})">工具箱</n-tab>
      <n-tab name='applications' @click="router.push({name: 'applications'})">应用列表</n-tab>
      <n-tab name='settings' @click="router.push({name: 'settings'})">系统配置</n-tab>
    </n-tabs>
    <router-view />
  </div>
</template>

<style scoped>
.home-tabs .n-tabs-tab-wrapper {
  margin: auto 15px;
}
</style>
